<template>
  <div class="home-container">
    <div class="go-home">
      <el-tooltip effect="dark" content="返回首页" placement="top">
        <el-icon size="24" color="#5cc4a7"><HomeFilled /></el-icon>
      </el-tooltip>
    </div>

    <!-- 01 目标与范围定义 -->
    <div class="form-sections">
      <div class="form-section-head">
        <headCom title="目标与范围定义" index="01"> </headCom>
      </div>

      <div class="steps-container">
        <el-row
          class="row-bg"
          :gutter="50"
          justify="space-between"
          style="position: relative"
        >
          <el-col :span="12">
            <FormSection
              title="LCA评估基本信息"
              :fields="basicInfoFields"
              class="left-section"
            >
              <template #operate>
                <el-icon :size="20" @click="handleLifeEdit(1)"
                  ><Edit
                /></el-icon>
              </template>
            </FormSection>
            <div class="arrow-connector">
              <!-- <img class="arrow" src="@/assets/images/arrow.png" alt="箭头" /> -->
              <Arrow/>
            </div>
          </el-col>
          <el-col :span="12">
            <FormSection
              title="产品基本信息"
              :fields="productInfoFields"
              class="right-section"
            >
              <template #operate>
                <el-icon :size="20" @click="handleLifeEdit(2)"
                  ><Edit
                /></el-icon>
              </template>
            </FormSection>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 02 生命周期清单 -->
    <div class="form-sections">
      <headCom title="生命周期清单" index="02"> </headCom>
      <div class="steps-container">
        <el-row
          class="row-bg"
          :gutter="50"
          justify="space-between"
          style="margin-bottom: 55px; position: relative"
        >
          <el-col :span="8">
            <FormSection
              title="材料获取"
              :fields="materialInfoFields"
              class="left-section"
            >
              <template #operate>
                <el-icon :size="20" @click="handleLifeEdit(3)"
                  ><Edit
                /></el-icon>
              </template>
            </FormSection>

            <div class="arrow-connector2">
              <img class="arrow" src="@/assets/images/arrow.png" alt="箭头" />
            </div>
          </el-col>
          <el-col :span="8">
            <FormSection
              title="生产过程"
              :fields="productProcessFields"
              class="right-section"
            >
              <template #operate>
                <el-icon :size="20" @click="handleLifeEdit(4)"
                  ><Edit
                /></el-icon>
              </template>
            </FormSection>
            <div class="arrow-connector3">
              <img class="arrow" src="@/assets/images/arrow.png" alt="箭头" />
            </div>
          </el-col>
          <el-col :span="8">
            <FormSection
              title="产品配送"
              :fields="productDeliveryFields"
              class="right-section"
            >
              <template #operate>
                <el-icon :size="20" @click="handleLifeEdit(5)"
                  ><Edit
                /></el-icon>
              </template>
            </FormSection>
          </el-col>
        </el-row>

        <el-row
          class="row-bg"
          :gutter="50"
          justify="space-between"
          style="position: relative"
        >
          <el-col :span="12">
            <FormSection
              title="产品废弃"
              :fields="productDiscardFields"
              class="left-section"
            >
              <template #operate>
                <el-icon :size="20" @click="handleLifeEdit(7)"
                  ><Edit
                /></el-icon>
              </template>
            </FormSection>
            <div class="arrow-connector4">
              <img class="arrow" src="@/assets/images/arrow.png" alt="箭头" />
            </div>
          </el-col>

          <el-col :span="12">
            <FormSection
              title="产品使用"
              :fields="productUseFields"
              class="left-section"
            >
              <template #operate>
                <el-icon :size="20" @click="handleLifeEdit(6)"
                  ><Edit
                /></el-icon>
              </template>
            </FormSection>
            <div class="arrow-connector5">
              <img class="arrow" src="@/assets/images/arrow.png" alt="箭头" />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 03 结果分析 -->
    <div class="form-sections">
      <headCom title="结果分析" index="03"> </headCom>
      <div class="steps-container">
        <FormSection
          title="结果分析"
          :fields="resultFields"
          class="right-section"
        >
          <template #operate>
            <el-icon :size="20" @click="handleLifeEdit(8)"
              ><DataAnalysis
            /></el-icon>
          </template>
        </FormSection>
      </div>
    </div>

    <!-- 04 研究报告 -->
    <div class="form-sections">
      <headCom title="研究报告" index="04"> </headCom>
      <div class="steps-container">
        <FormSection
          title="研究报告"
          :fields="studyFields"
          class="left-section"
        >
          <template #operate>
            <el-icon :size="20" @click="handleLifeEdit(9)"
              ><Document
            /></el-icon>
          </template>
        </FormSection>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, reactive, toRefs, onBeforeMount, onMounted } from "vue";
  import headCom from "../carbonReport/formSection/headCom.vue";
  import FormSection from "../carbonReport/formSection/formSection.vue";
import Arrow from "@/components/Arrow/index.vue"
  const emit = defineEmits(["changeModel"]);
  const basicInfoFields = ref([
    {
      label: "系统边界：",
      type: "input",
      value: "边界1",
    },

    { label: "基准年：", type: "input", value: "2024" },

    {
      label: "功能单位：",
      type: "input",
      value: "1 piece",
    },
  ]);

  const productInfoFields = ref([
    {
      label: "数据收集开始日期-结束日期：",
      type: "input",
      value: "2024-03-15 至 2024-04-30",
    },
    { label: "收集期内产品总量：", type: "input", value: "2000.00 个/piece" },
    { label: "产品净重/单位：", type: "input", value: "10.00 Kg" },
  ]);
  const productProcessFields = ref([
    {
      label: "生产输入：",
      type: "input",
      value: "147.098 kgCO₂e",
    },
    { label: "生产输出：", type: "input", value: "0 kgCO₂e" },
    { label: "排放总量：", type: "input", value: "147.098 kgCO₂e" },
  ]);
  const productDeliveryFields = ref([
    {
      label: "产品存储：",
      type: "input",
      value: "0 kgCO₂e",
    },
    { label: "产品运输：", type: "input", value: " 46751.318 kgCO₂e" },
    { label: "排放总量：", type: "input", value: "46751.318 kgCO₂e" },
  ]);
  const productUseFields = ref([
    {
      label: "排放总量：",
      type: "input",
      value: "19772.997 kgCO₂e",
    },
  ]);
  const productDiscardFields = ref([
    {
      label: "排放总量：",
      type: "input",
      value: "19772.997 kgCO₂e",
    },
  ]);

  const materialInfoFields = ref([
    {
      label: "材料获取",
      type: "input",
      value: "1698978.89761076kgCO₂",
    },
    {
      label: "运输过程",
      type: "input",
      value: "0kgCO₂ e",
    },
    {
      label: "排放总量",
      type: "input",
      value: "1698978.89761076kgCO₂",
    },
  ]);
  const resultFields = ref([
    { label: "排放总量：", type: "input", placeholder: "请输入" },
    { label: "生物质燃料：", type: "input", placeholder: "请输入" },
    { label: "化石燃料：", type: "input", placeholder: "请输入" },
    { label: "土地使用变化：", type: "input", placeholder: "请输入" },
  ]);
  const studyFields = ref([
    { label: "公司名称：", type: "input", placeholder: "请输入" },
    { label: "产品名称：", type: "input", placeholder: "请输入" },
    { label: "产品型号：", type: "input", placeholder: "请输入" },
  ]);

  const handleLifeEdit = (val) => {
    // console.log("编辑生命周期", val);
    emit("changeModel", val); // 触发事件并传递数据
  };
</script>
<style lang="scss" scoped>
  .home-container {
    .go-home {
      position: absolute;
      right: 0;
      top: 0;
    }

    .form-sections {
      .head-com-container {
        .el-icon {
          cursor: pointer;
        }
      }
    }

    .arrow {
      align-self: center;
      color: #2e7d32;
      font-size: 24px;
      margin: 0 8px;
      width: 50px;
      height: 50px;
      position: absolute;
    }
    .arrow-connector {
      @extend .arrow;
      top: 43%;
      left: 48%;
    }
    .arrow-connector2 {
      @extend .arrow;
      top: 43%;
      left: 31.5%;
    }
    .arrow-connector3 {
      @extend .arrow;
      top: 43%;
      left: 64.8%;
    }
    .arrow-connector4 {
      @extend .arrow;
      top: -55%;
      left: 78%;
      transform: rotate(90deg);
    }
    .arrow-connector5 {
      @extend .arrow;
      top: 30%;
      left: 49%;
      transform: rotate(180deg);
    }
  }
</style>
